<template>
  <div class="all">
    <div>
      <div class="top">
        <div class="top-pic"><img src="../assets/Vector 6.png" alt=""></div>
        <div class="colle">我的购物车</div>
        <div class="tishi">温馨提示：商品是否购买成功，以最终下单为准哦，请尽快结算</div>
        <div class="heng"></div>
      </div>
    </div>
    <div class="Content" v-if="!tableData.length">
      <div class="content">
        <div class="left">
          <img src="../assets/暂无收藏_1_.png" alt="" />
        </div>
        <div class="right">
          <span>你的购物车还是为空</span>
          <span>快去购物吧 </span>
        </div>
      </div>
    </div>
    <div class="pic" v-if="tableData.length">
      <div class="thing-list">
        <!-- <table>
          <thead>
            <tr>
              <th><input type="checkbox" class="thcheck">全选</th>
              <th class="name">商品名称</th>
              <th>单价</th>
              <th>数量</th>
              <th>小计</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><input type="checkbox" class="tdcheck" /></td>
              <td class="ming"><img src="../assets/Rectangle 166.png" alt="">
                <div class="xiao">Redmi K30 5G</div>
              </td>
              <td>2599元</td>
              <td class="sl">
                <button class="jian">-</button>
                <input type="text" placeholder="1">
                <button class="jia">+</button>
              </td>
              <td class="xj">1533</td>
              <td><img src="../assets/Vector (6).png" alt=""></td>
            </tr>
            <tr>
              <td><input type="checkbox" class="tdcheck" /></td>
              <td class="ming"><img src="../assets/Rectangle 166.png" alt="">
                <div class="xiao">Redmi K30 5G</div>
              </td>
              <td>2599元</td>
              <td class="sl">
                <button class="jian">-</button>
                <input type="text" placeholder="1">
                <button class="jia">+</button>
              </td>
              <td class="xj">1533</td>
              <td><img src="../assets/Vector (6).png" alt=""></td>
            </tr>
          </tbody>
        </table> -->
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column label="" width="200">
            <template  slot-scope="scope">
            <el-image :src="' http://www.codeedu.com.cn/' +scope.row.productPicture" ></el-image>
          </template>
          </el-table-column>
          <el-table-column label="商品名称" width="400">
            <template slot-scope="scope">{{ scope.row.productName }}</template>
          </el-table-column>
          <el-table-column label="单价" width="120">
            <template slot-scope="scope">{{ scope.row.productSellingPrice }}</template>
          </el-table-column>
          <el-table-column label="数量" width="240">
            <template slot-scope="scope">
            <el-input-number v-model=" scope.row.num " @change="handleChange(scope.$index)" :min="1" label="描述文字"></el-input-number>
            </template>
          </el-table-column>
          <el-table-column label="小计" width="120">
            <template slot-scope="scope">{{ scope.row.num * scope.row.productSellingPrice }}</template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.row.shoppingCartId)" icon="el-icon-error"></el-button>
            </template>
          </el-table-column>
          <!-- <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      show-overflow-tooltip>
    </el-table-column> -->
        </el-table>
        <div class="botton">
          <div class="jxgw">
            <router-link to="/allShop">继续购物</router-link>
          </div>
          <div class="xiahua"></div>
          <div class="wenzi">
            共 <p class="num">{{count}}</p> 件商品，已选择 <p class="nums">{{selectCount}}</p> 件
          </div>
          <div class="heji">合计：<p class="hejiyuan">{{total}}</p>
            <p class="yuan">元</p>
          </div>
          <div class="jiesuan" @click="jiesuan">
            <router-link to="/#">去结算</router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {delshoppingCart,productcount,shoppingCart,productnum,addorders} from "../api/api"
export default {
  name: 'shop',
  data() {
    return {
        tableData: [],
        multipleSelection: [],
        count:0,
        selectCount:0,
        total:0,
        selectDate:[],
        
      }
  },
  created(){
    this.shoppingCart()
    this.productcount()
    this.handleChange()
    console.log("ooo",this.shoppingCartId);
  },
  methods:{
    //选择
      handleSelectionChange(val) {
        this.multipleSelection = val;
        this.selectCount = val.length;
        console.log('eeww',this.multipleSelection.length);
        this.total = val.reduce(
        (per, cru) =>
          Number(per) + Number(cru.num) * Number(cru.productSellingPrice),
        0
      );
      this.selectDate = val;
      },
      //编辑
      handleEdit(id) {
        console.log("fff",id);
        this.delshoppingCart(id)
        this.shoppingCart()
      },
      //计数器
   //修改商品数量
    handleChange(data) {
      var newArr = this.tableData[data];
      productnum(newArr).then((res) => {
        console.log('lll',res);
      });
      this.handleSelectionChange(this.selectDate)
    },
      //查询当前用户购物车
      shoppingCart(){
        shoppingCart().then(res=>{
          console.log('ee',res);
          this.tableData = res.data.data
        })
      },
      //显示购物车商品的种类数量
    productcount(data) {
      
      productcount().then((res) => {
        
          this.count = res.data.data;
          console.log(this.count);
          this.shoppingCart();
          this.$store.commit("addNumber", this.count);
        
      });
    },
    //生成订单
    jiesuan(){
      if (this.selectDate) {
              let arr = [];
              for (var i = 0; i < this.selectDate.length; i++) {
                arr.push(this.selectDate[i].shoppingCartId);
              }

        addorders(arr).then(res=>{
            console.log("dddd",res);
        })
        }
    },
      //删除购物车
      delshoppingCart(id){
        console.log("hhh",id);
        delshoppingCart(id).then(res=>{
          console.log(res);
        })
      }

  }


}
</script>

<style scoped lang="scss">

* {
  margin: 0;
  padding: 0;
}
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #ff6700 !important;
  border-color: #ff6700 !important;
}
.all {
  width: 100%;
  margin: auto;
  min-height: calc(100vh - 123px - 336px);
}

.top {
  position: relative;
  width: 1200px;
  margin: auto;
  height: 80px;
  background: #FFFFFF;
}

.top-pic {
  position: absolute;
  width: 20px;
  height: 26px;
  top: 27px;

}

.colle {
  position: absolute;
  width: 140px;
  height: 28px;
  left: 30px;
  top: 26px;
  font-family: 'PingFang SC';
  font-style: normal;
  font-weight: 400;
  font-size: 28px;
  line-height: 100%;
  color: #333333;
}

.tishi {
  position: absolute;
  width: 336px;
  height: 12px;
  left: 214px;
  top: 34px;
  font-family: 'PingFang SC';
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 100%;
  color: #606266;
}

.heng {
  position: absolute;
  width: 100%;
  height: 1px;
  left: 0px;
  top: 80px;
  background: #FF6700;
}

.pic {
  width: 1200px;
  
  background: #F5F5F5;
  position: relative;
  margin: auto;
  top: 47px;
  margin-bottom: 70px;
}

/*table {
  width: 1200px;
  position: relative;
  top: 0;
  left: 0;
}


.thcheck {
  width: 28px;
  height: 14px;
  font-family: 'PingFang SC';
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 100%;
  color: #606266;
}

.tdcheck {
  width: 28px;
  height: 14px;
  font-family: 'PingFang SC';
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 100%;
  color: #606266;
  text-align: left;
  margin-left: -30px;
}

.ming {
  display: flex;
  margin-top: 14px;
  margin-left: -30px;
}

.xiao {
  height: 100%;
  font-family: 'PingFang SC';
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 78px;
  text-align: center;
  color: #606266;
  transform: translate(36px,0);
}

.xj {
  width: 56px;
  height: 16px;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  color: #FF6700;
}

tr td {
  position: relative;
}*/

.botton {
  position: relative;
  width: 1200px;
  height: 48px;
  background: #FFFFFF;
}

thead tr {
  height: 82px;
}

tbody tr {
  height: 116px;
  line-height: 116px;
}
.jian {
  width: 34px;
  height: 32px;
  background: #F5F7FA;
  border: 1px solid #DCDFE6;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-right-width: 0px;
}

.jia {
  width: 34px;
  height: 32px;
  background: #F5F7FA;
  border: 1px solid #DCDFE6;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border-left-width: 0px;
}
.jxgw a {
  position: absolute;
  width: 64px;
  height: 16px;
  left: 30px;
  top: 16px;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
  color: #606266;
  text-decoration: none;
}

.xiahua {
  position: absolute;
  width: 2px;
  height: 20px;
  left: 116px;
  top: 14px;
  background: #B0B0B0;
}

.wenzi {
  position: absolute;
  height: 16px;
  left: 143px;
  top: 16px;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
  color: #606266;
  display: flex;
}
.sl input {
  width: 62px;
  height: 30px;
  text-align: center;
  padding: 0;
  margin: 0;
  border-radius: 0;
  border: 1px solid #DCDFE6;
}

.wenzi p {
  margin-top: 0px;
  color: #FF6700;
}

.name {
  transform: translate(-25%, 0);
}

.heji {
  position: absolute;
  width: 94px;
  height: 32px;
  left: 842px;
  top: 8px;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 56px;
  color: #FF6700;
  display: flex;
}

.heji p {
  margin-top: 0px;
  font-weight: 400;
  font-size: 33px;
  line-height: 44px;

}

table {
  margin-bottom: 24px;
}

.jiesuan {
  position: absolute;
  width: 200px;
  height: 48px;
  left: 1000px;
  top: 0px;
  background: #E0E0E0;
}
.jiesuan:hover {
  position: absolute;
  width: 200px;
  height: 48px;
  left: 1000px;
  top: 0px;
  background: #ea7836;
}
.thing-list {
  position: relative;
  width: 1200px;
  margin: auto;
}

.jiesuan a {
  position: absolute;
  height: 20px;
  left: 68px;
  top: 11px;
  font-family: 'PingFang SC';
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 100%;
  color: #909399;
  text-decoration: none;
}
::v-deep.el-table .cell{
  font-family: 'PingFang SC';
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 100%;
  color: #606266;
}
::v-deep.el-table .el-table__cell{
  font-family: 'PingFang SC';
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 100%;
  color: #606266;
}
::v-deep.el-button{
  border: 0px solid #DCDFE6;
}
::v-deep.el-table .el-table__cell{
  text-align: center;
}
::v-deep.el-checkbox__input.is-checked .el-checkbox__inner{
      background-color: #FF6700;
    border-color: #FF6700;
    border-top-color:#FF6700;
    border-right-color: #FF6700;
    border-bottom-color: #FF6700;
    border-left-color: #FF6700;
    background-color: #FF6700;
    border-color: #FF6700;
}

  .Content {
    width: 100%;
    height: 598px;
    background: #f5f5f5;
    .content1 {
      width: 1200px;
      margin: auto;
      padding-top: 60px;
    }
    .content {
      width: 1200px;
      margin: auto;
      display: grid;
      grid-template-columns: 50% 50%;
      padding-top: 60px;
      .right {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        span {
          font-family: "PingFang SC";
          font-style: normal;
          font-weight: 600;
          font-size: 36px;
          color: #b0b0b0;
          &:nth-child(1) {
            margin-top: 80px;
          }
          &:nth-child(2) {
            margin-top: 10px;

            font-size: 18px;
          }
        }
      }
    }
  }
</style>